<template>
  <div class="container">
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      @click-right="save"
      title="编辑资料"
      right-text="保存"
    ></van-nav-bar>
    <!-- 用户资料 -->
    <van-cell-group>
      <van-cell is-link title="头像" @click="showPhoto = true" center>
        <van-image
          slot="default"
          width="1.5rem"
          height="1.5rem"
          fit="cover"
          round
          :src="photo"
        />
      </van-cell>
      <van-cell
        is-link
        title="名称"
        @click="showName = true"
        :value="user.name"
      />
      <van-cell
        is-link
        title="性别"
        @click="showGender = true"
        :value="user.gender === 0 ? '男' : '女'"
      />
      <van-cell
        is-link
        title="生日"
        @click="openDate()"
        :value="user.birthday"
      />
    </van-cell-group>
    <!-- 修改头像弹出框 -->
    <van-popup v-model="showPhoto" position="bottom">
      <input type="file" @change="preview" ref="fileInput" style="display: none;"/>
      <van-cell value="本地相册选择" is-link  @click="$refs.fileInput.click()"/>
      <van-cell value="拍照" is-link />
    </van-popup>
    <!-- 修改用户名弹出框 -->
    <van-popup v-model="showName" position="bottom">
      <van-field v-model="user.name" required placeholder="请输入用户名" />
    </van-popup>
    <!-- 修改性别弹出框 -->
    <van-popup v-model="showGender" position="bottom">
      <van-cell value="男" @click="changeGender(0)" is-link />
      <van-cell value="女" @click="changeGender(1)" is-link />
    </van-popup>
    <!-- 修改用户生日弹出框 -->
    <van-popup v-model="showBirthday" position="bottom">
      <van-datetime-picker
        title="选择生日"
        v-model="nowDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="showBirthday = false"
        @confirm="confirmDate"
      />
    </van-popup>
  </div>
</template>

<script>
// 导入时间处理格式数据
import dayjs from 'dayjs'
// 导入获取用户个人资料信息的接口
import { getUserProfile, updateUserPhoto, updateUserInfo } from '../../api/user'
export default {
  name: 'user-profile',
  data () {
    return {
      // 弹窗控制
      showPhoto: false, // 修改头像弹框
      showName: false, // 修改名称弹框
      showGender: false, // 修改性别弹框
      showBirthday: false, // 修改生日弹框
      nowDate: new Date(), // 当前时间
      minDate: new Date('1950-01-01'), // 生日最早的选择日期
      // 日期控件 最大可选日期
      maxDate: new Date(), // 最大的选择日期就是当前时间
      // 默认用户信息
      photo: 'https://img.yzcdn.cn/vant/cat.jpeg',
      user: {
        name: '默认信息',
        gender: 0,
        birthday: '2019-10-10'
      }
    }
  },
  methods: {
    async save () {
      // this.$toast.success('保存成功')
      try {
        // 修改头像
        await updateUserPhoto(this.$refs.fileInput?.files[0])
        // 修改用户其他资料
        await updateUserInfo(this.user)
        // 提示
        this.$toast.success('修改成功')
      } catch (error) {
        console.log(error)
        this.$toast.fail('修改失败')
      }
    },
    openDate () {
      // 有生日数据
      if (this.user.birthday) {
        this.nowDate = new Date(this.user.birthday)
      }
      this.showBirthday = true
    },
    // 选择时间的回调函数
    confirmDate (value) {
      // 确认时间后  把Date转换成String
      this.user.birthday = dayjs(value).format('YYYY-MM-DD')
      this.showBirthday = false
    },
    changeGender (gender) {
      // 选择性别 gender 0 男  1 女
      this.user.gender = gender
      this.showGender = false
    },
    // 调用接口获取用户个人资料
    async getUserProfile () {
      const { status, data } = await getUserProfile()
      if (status === 200) {
        // console.log(data)
        // 将后天返回的数据赋值给当前用户的个人信息
        this.user = data
        // 将用户返回的用户头像返回给当前个人信息的头像
        this.photo = data.photo
      }
    },
    // 上传3要素：input 输入框   Fild文件对象  后台上传接口
    // 上传之前做选择图片的预览
    // 通过这个change事件的event对象获取当前需要的数据
    preview (e) {
      // console.log(e)
      // console.log(this.$refs.fileInput.files)
      // 通过event / 或者通过ref，dom对象来操作
      const file = this.$refs.fileInput.files[0]
      // 对获取的file对象，做转换base64位格式
      // 1. 初始化浏览器内置一个构造函数  FileReader
      const fr = new FileReader()
      // 2. 装换传入的file对象 => 异步操作
      fr.readAsDataURL(file)
      // 3. 获取转换后的格式 => 异步操作，通过onload拿到
      fr.onload = () => {
        // console.log(fr.result)
        // 赋值，将装换完的base64格式赋值给当前的头像
        this.photo = fr.result
        // 关闭弹框
        this.showPhoto = false
      }
    }
  },
  created () {
    this.getUserProfile()
  }
}
</script>

<style scoped lang='less'></style>
